csydesfandomcom-20200215-history
Help:Tab view
---- Tab view provides an easy way to display multiple content pages in a single article using tabs. This can be an attractive and useful view for organising content. For a similar extension that doesn't require multiple pages, see . Step-by-step *First, you need to create a page of content for each tab you wish to display. These pages can be created anywhere on your wiki. :In this example, we've created three subpages to this article, which we will use in our tabs below. They are titled: :* :* :* *Open the page that you'd like to display tabs on for editing, and switch to . *Enter your tab code in the following format: PAGENAME1|TITLE1 PAGENAME2|TITLE2 PAGENAME3|TITLE3 So, in our example here, we'll enter: Help:Tab view/Sample tab content 1|Tab 1 Help:Tab view/Sample tab content 2|Tab 2 Help:Tab view/Sample tab content 3|Tab 3 This will give us the following tabs: Help:Tab view/Sample tab content 1|Tab 1 Help:Tab view/Sample tab content 2|Tab 2 Help:Tab view/Sample tab content 3|Tab 3 Customisation In addition to the title, there are two other variables you can customise in your tabs: *Cache *Preset We'll explain each of these below. They display in this order: PAGENAME|TITLE|CACHE|PRESET Disabling tab cache If a page is showing very frequently updated information, you may want to force the tab to check for new content on each page load. This can be done with a second pipe, followed by the word "false." This should be used sparingly, however, as it can slow down the overall reading experience. Help:Tab view/Sample tab content 1|Tab 1|false Help:Tab view/Sample tab content 2|Tab 2 Help:Tab view/Sample tab content 3|Tab 3 Preset an open tab The last variable chooses which tab is open when the page loads. By default, the first tab is open, but you can choose an open tab by using a third pipe followed by the word "true": Help:Tab view/Sample tab content 1|Tab 1 Help:Tab view/Sample tab content 2|Tab 2||true Help:Tab view/Sample tab content 3|Tab 3 This will give you: Help:Tab view/Sample tab content 1|Tab 1 Help:Tab view/Sample tab content 2|Tab 2||true Help:Tab view/Sample tab content 3|Tab 3 Parameters The only parameters available in tab-view is "title" and "id". You cannot customise each tab-view in the page. Currently it has to be done via site CSS. The parameters are: : Styling Once you have set an id, you can modify every tab. For example, with id = Example: ul.tabs > data-tab="flytabs_Example0" { /* style goes here for data-tab="flytabs_Example0" (first tab) */ } ul.tabs > data-tab="flytabs_Example1" { /* style goes here for data-tab="flytabs_Example1" (second tab) */ } ul.tabs > data-tab="flytabs_Example2" { /* style goes here for data-tab="flytabs_Example2" (third tab) */ } The tabs themselves will appear in a div with the id "flytabs_Example", and their content will be placed in a separate div with the id "flytabs_Example-content-wrapper". Issues Mobile experience On mobile devices, no tabs are shown - the pages are shown as a list of links. View/edit tab content Tab view does not provide a simple way to view/edit the original page. This can be troublesome for inexperienced users that want to edit the content inside a tab. Since the tab is actually a link element, a user could right click it and click open to manually follow the link. See also * Further help and feedback __NOSHAREDHELP__Category:Help